<template>
 <Header :showLogo="showLogo"></Header>
  <div class="registerContainer">
    <!-- <div class="content">
      <label>手机号:</label>
      <input
        v-validate="'required|phone'"
        type="text"
        name="手机"
        placeholder="请输入你的手机号"
        v-model="phone"
      />
      <span class="error-msg"></span>
    </div>
    <div class="content">
      <label>验证码:</label>
      <input
        v-validate="'required|code'"
        name="验证码"
        type="text"
        placeholder="请输入验证码"
        v-model="code"
      />
      <button class="getcode">获取验证码</button>
      <span class="error-msg"></span>
    </div>
    <div class="content">
      <label>登录密码:</label>
      <input
        v-validate="'required|pwd'"
        name="密码"
        type="text"
        placeholder="请输入你的登录密码"
        v-model="password"
      />
      <span class="error-msg"></span>
    </div>
    <div class="content">
      <label>确认密码:</label>
      <input name="确认密码" type="text" placeholder="请输入确认密码" v-model="re_password" />
      <span class="error-msg"></span>
    </div> -->
    <img class="registerImg" src="@/static/images/网易.png" alt="" />
    <div class="main">
      <van-form @submit="register">
        <van-cell-group inset>
          <!-- 输入手机号，调起手机号键盘 -->
          <van-field
            v-model="loginParams.phone"
            name:validator
            :rules="[{ validator, message: '请输入合法数据' }]"
            placeholder="请输入注册手机号码"
            type="tel"
            label="手机号"
          />
          <!-- 输入密码 -->
          <van-field
            v-model="loginParams.password"
            name="valPassword"
            :rules="[{ validator: valiPassword, message: ' 密码必须包含大小写字母,特殊字符和数字,且长度不低于8位' }]"
            placeholder="请输入密码"
            type="password"
            label="密码"
          />
          <van-field
            v-model="rePassword"
            placeholder="请确认密码"
            :rules="[{ validator: valConfirm, message: '密码不同' }]"
            type="password"
            label="请确认密码"
          />
          <van-field
            v-model="loginParams.code"
            center
            :rules="[{ validator: code, message: '请输入合法数据' }]"
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" @click="getcode" type="primary">发送验证码</van-button>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"> 注册账号 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Register'
})
</script>
<script lang="ts" setup>
import userApi from '@/api/userInfo'
import { useUserInfoStore } from '@/stores/userInfo'
import { ref } from 'vue'
// 定义展示头部导航
const showLogo = ref(false)

const rePassword = ref()

const loginParams = ref({
  phone: '',
  password: '',
  code: ''
})

// 获取验证码
const getcode = async () => {
  const res = await userApi.getCode(loginParams.value.phone)
  
  loginParams.value.code = res.data
}

// 正则表达式判断
// 手机号判断
const validator = (val: any) =>
  /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/.test(val)


// 正则表达式验证密码
const valiPassword = (val: any) =>
  /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._])[0-9a-zA-Z!@#$%^&*,\\._]{8,12}$/.test(val)


// 正则表达式验证确认密码
const valConfirm = (val: any) => {
    if(val === loginParams.value.password){
      return true
    }else{
      return false
    }
}

// 验证码验证规则
const code = (val: any) => /[0-9]|[0-9]|[0-9]|[0-9]|[0-9]|[0-9]/.test(val)


// 注册账号 判断逻辑
const register = () => {
  useUserInfoStore().register(loginParams.value)
}
</script>

<style lang="less" scoped>
.registerContainer {
  // height: calc(100vh - 44px);
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .registerImg {
    width: 134px;
    height: 45px;
  }
  .main {
    margin-top: 40px;
    .btn {
      margin-top: 30px;
      width: 90%;
      margin-left: 20px;
    }
  }
}
</style>
